<!DOCTYPE html>
<html lang="zh-CN">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>企业管理系统 - 用户管理</title>
<link rel="stylesheet" href="css/all.min.css">
<link rel="stylesheet" href="css/backUser.css">
</head>

<body>
	<!-- 左侧导航栏 -->
	<div class="sidebar">
		<div class="logo">
			<div class="logo-text">后台管理系统</div>
		</div>

		<a href="backVideo.html" class="nav-item"> <i class="fas fa-video"></i>
			<span>视频管理</span>
		</a> <a href="backDanmaku.html" class="nav-item"> <i
			class="fas fa-comment-dots"></i> <span>弹幕管理</span>
		</a> <a href="backReview.html" class="nav-item"> <i
			class="fas fa-check-circle"></i> <span>视频审核</span>
		</a> <a href="backComment.html" class="nav-item"> <i
			class="fas fa-comments"></i> <span>评论管理</span>
		</a>
		<!-- 用户管理模块 -->
		<a href="#" class="nav-item active"> <i class="fas fa-users"></i>
			<span>用户管理</span>
		</a> <a href="backData.html" class="nav-item"> <i
			class="fas fa-chart-line"></i> <span>数据统计</span>
		</a> <a href="#" class="nav-item"> <i class="fas fa-clipboard-list"></i>
			<span>日志管理</span>
		</a>
	</div>

	<!-- 主内容区 -->
	<div class="main-content">
		<!-- 顶部工具栏 -->
		<div class="top-bar">
			<div class="search-box"></div>

			<div class="user-actions">
				<div class="notification">
					<i class="fas fa-bell"></i>
				</div>
				<div class="user-profile">
					<div class="user-avatar">AD</div>
					<div class="username">管理员</div>
				</div>
			</div>
		</div>

		<!-- 内容区域 -->
		<div class="content-area">
			<h1 class="section-title">
				<i class="fas fa-users"></i> 用户管理
			</h1>

			<!-- 用户管理模块 -->
			<div class="user-management">
				<!-- 筛选工具栏 -->
				<div class="filter-toolbar">
					<div class="filter-group">
						<label class="filter-label">用户状态</label> <select
							class="filter-select" id="filter-select">
							<option value="all">全部状态</option>
							<option value="active" id="commen">正常</option>
							<option value="banned" id="uncommen">已封禁</option>
						</select>
					</div>

					<div class="filter-group">
						<label class="filter-label">用户角色</label> <select
							class="filter-select" id="filter-select-role">
							<option value="all">全部角色</option>
							<option value="admin" id="admin">管理员</option>
							<option value="user" id="coUser">普通用户</option>
						</select>
					</div>

					<div class="filter-group">
						<label class="filter-label">用户ID</label> 
						<input type="text" name="val" class="filter-input" placeholder="输入用户ID" id="input">
					</div>

					<div class="filter-buttons">
					<button class="btn btn-outline" id="but">提交</button>
						<a class="btn btn-outline" href="backUser.html"> <i
							class="fas fa-redo"></i> 重置
							
						</a>
					</div>
				</div>

				<!-- 用户列表 -->
				<div class="user-list-container" id="user">
					<div class="user-list-header">
						<div>用户信息</div>
						<div>角色</div>
						<div>状态</div>
						<div>操作</div>
					</div>


				</div>

				<!-- 分页控件 -->
				<div class="pagination" id="pagination">
					
				</div>
			</div>
		</div>
	</div>

	<!-- 编辑用户模态框 -->
	<div class="modal" id="editUserModal">
		<div class="modal-content">
			<div class="modal-header">
				<h3>编辑用户信息</h3>
				<button class="close-modal">&times;</button>
			</div>
			<div class="modal-body">
				<form id="editUserForm">
					<div class="form-group">
						<label>用户名</label> <input type="text" id="editUsername"
							class="form-input" required>
					</div>
					<div class="form-group">
						<label>电子邮箱</label> <input type="email" id="editEmail"
							class="form-input" required>
					</div>
					<div class="form-group">
						<label>用户角色</label> <select id="editRole" class="form-input">
							<option value="admin">管理员</option>
							<option value="user">用户</option>
						</select>
					</div>
					<div class="form-group">
						<label>用户状态</label> <select id="editStatus" class="form-input">
							<option value="active">正常</option>
							<option value="banned">已封禁</option>
						</select>
					</div>
				</form>
			</div>
			<div class="modal-footer">
				<button class="btn btn-outline cancel-edit">取消</button>
				<button class="btn btn-primary save-changes">保存更改</button>
			</div>
		</div>
	</div>

	<script src="js/backUser.js"></script>
	<script src="js/jquery.js"></script>
</body>
<script>
		function AllUser(pageNum = 1){
			$.ajax({
				type: "GET",
	            url: "allUser.do",
	            data: {
	            	pageNum: pageNum
	            },
	            success: function(data) {
	            	$("#user").empty();
	            	for(var i = 0;i<data.page.data.length;i++){
	            		let userId = data.page.data[i].userId;
	            		if(data.page.data[i].role==0){
	            			if(data.page.data[i].type==0){
	            				$("#user").append(`
			             				<div class="user-item">
			                                <div class="user-info">
			                                    <div class="user-details">
			                                       	<div class="username">${data.page.data[i].username}</div>
			                                        <div class="user-id" data-user-id="${data.page.data[i].userId}">ID: ${data.page.data[i].userId}</div>
			                                    </div>
			                                </div>
			                                <div class="user-role">
			                                    <span class="role-badge role-admin">用户</span>
			                                </div>
			                                <div class="user-status">
			                                    <span class="status-badge status-unverified">封禁</span>
			                                </div>
			                                <div class="user-actions">
			                                    <button class="action-btn unban-btn" id="unban">解封</button>
			                                    <button class="action-btn reset-pwd">重置密码</button>
			                                </div>
			                            </div>		
			             			`)
	            			}else if(data.page.data[i].type==1){
	            				$("#user").append(`
			             				<div class="user-item">
			                                <div class="user-info">
			                                    <div class="user-details">
			                                       	<div class="username">${data.page.data[i].username}</div>
			                                        <div class="user-id" data-user-id="${data.page.data[i].userId}">ID: ${data.page.data[i].userId}</div>
			                                    </div>
			                                </div>
			                                <div class="user-role">
			                                    <span class="role-badge role-admin">用户</span>
			                                </div>
			                                <div class="user-status">
			                                    <span class="status-badge status-active">正常</span>
			                                </div>
			                                <div class="user-actions">
			                                    <button class="action-btn ban-btn" id="ban">封禁</button>
			                                    <button class="action-btn reset-pwd">重置密码</button>
			                                </div>
			                            </div>		
			             			`)
	            			}
	            			
	            		}else{
	            			
	            			if(data.page.data[i].type==0){
	            				$("#user").append(`
			             				<div class="user-item">
			                                <div class="user-info">
			                                    <div class="user-details">
			                                       	<div class="username">${data.page.data[i].username}</div>
			                                        <div class="user-id" data-user-id="${data.page.data[i].userId}">ID: ${data.page.data[i].userId}</div>
			                                    </div>
			                                </div>
			                                <div class="user-role">
			                                    <span class="role-badge role-admin">管理员</span>
			                                </div>
			                                <div class="user-status">
			                                    <span class="status-badge status-unverified">封禁</span>
			                                </div>
			                                <div class="user-actions">
			                                    <button class="action-btn unban-btn" id="unban">解封</button>
			                                    <button class="action-btn reset-pwd">重置密码</button>
			                                </div>
			                            </div>		
			             			`)
	            			}else if(data.page.data[i].type==1){
	            				$("#user").append(`
			             				<div class="user-item">
			                                <div class="user-info">
			                                    <div class="user-details">
			                                       	<div class="username">${data.page.data[i].username}</div>
			                                        <div class="user-id" data-user-id="${data.page.data[i].userId}">ID: ${data.page.data[i].userId}</div>
			                                    </div>
			                                </div>
			                                <div class="user-role">
			                                    <span class="role-badge role-admin">管理员</span>
			                                </div>
			                                <div class="user-status">
			                                    <span class="status-badge status-active">正常</span>
			                                </div>
			                                <div class="user-actions">
			                                    <button class="action-btn ban-btn" id="ban">封禁</button>
			                                    <button class="action-btn reset-pwd">重置密码</button>
			                                </div>
			                            </div>		
			             			`)
	            			}
		             			
	            		}
	            		
	            	}
	            	$("#pagination").empty();
                    if (data.page.hasPrev) {
                        $("#pagination").append(`<button data-page="${data.page.pageNum - 1}" >&lt;</button>`);
                    }
                    $.each(data.page.totalPageNum, function (index, num) {
                        if (num === data.page.pageNum) {
                            $("#pagination").append(`<button data-page="${num}" class="active">${num}</button>`);
                        } else {
                            $("#pagination").append(`<button data-page="${num}">${num}</button>`);
                        }
                    });
                    if (data.page.hasNext) {
                        $("#pagination").append(`<button data-page="${data.page.pageNum + 1}">&gt;</button>`);
                    }

                    // 绑定分页链接的点击事件
                    $("#pagination button").on("click", function (e) {
                        e.preventDefault();
                        const pageNum = $(this).data("page");
                        AllUser(pageNum);
                    });
	            	$("#user").on("click", ".ban-btn", function() {
         				const userId = $(this).closest(".user-item").find(".user-id").data("user-id"); 
                        downUser(userId);
         			})
         			$("#user").on("click", ".unban-btn", function() {
         				const userId = $(this).closest(".user-item").find(".user-id").data("user-id"); 
                        upUser(userId);
         			})
         			$("#user").on("click", ".reset-pwd", function() {
         				const userId = $(this).closest(".user-item").find(".user-id").data("user-id"); 
                        upPass(userId);
         			})
	            }
			})
		}
		function downUser(userId){
			$.ajax({
				type: "POST",
					url: "updatabyUId.do",
				data: {
					userId:userId
				},
				success: function(data) {
					
					
					AllUser();
				}
			})
		}
		function upUser(userId){
			$.ajax({
				type: "POST",
					url: "reupdateUId.do",
				data: {
					userId:userId
				},
				success: function(data) {
					
					
					AllUser();
				}
			})
		}
		function upPass(userId){
			$.ajax({
				type: "POST",
					url: "resetCode.do",
				data: {
					userId:userId
				},
				success: function(data) {
					
					
					AllUser();
				}
			})
		}
		
		// 页面加载完成后立即绑定事件
$(document).ready(function() {
    // 监听下拉选择框的change事件
    let typeValue = 3;
    let roleValue = 3;
    $("#filter-select").change(function() {
        const selectedValue = $(this).val();
        if (selectedValue === "all") {
            typeValue = 3; // 假设后端支持"all"参数
        } else if (selectedValue === "active") {
            typeValue = 1; // 假设1表示正常状态
        } else if (selectedValue === "banned") {
            typeValue = 0; // 假设0表示封禁状态
        }
        a();
    });
    $("#filter-select-role").change(function() {
        const selectedValue = $(this).val();
        if (selectedValue === "all") {
        	roleValue = 3; // 假设后端支持"all"参数
        } else if (selectedValue === "admin") {
        	roleValue = 1; // 假设1表示管理员
        } else if (selectedValue === "user") {
        	roleValue = 0; // 假设0表示普通用户
        }
        a();
    });
   	function a(){
   	 $.ajax({
         type: "GET",
         url: "allUserByRole.do",
         data: {
             role: roleValue,
             type:typeValue
         },
         success: function(data) {
             // 清空用户列表
             $("#user").empty();
             
             // 填充用户列表
             for(var i = 0; i < data.data.length; i++){
                 let userId = data.data[i].userId;
                 let userHtml = "";
                 
                 // 根据用户角色和状态生成HTML
                 if(data.data[i].role == 0){
                     if(data.data[i].type == 0){
                         userHtml = `
                             <div class="user-item">
                                 <div class="user-info">
                                     <div class="user-details">
                                         <div class="username">${data.data[i].username}</div>
                                         <div class="user-id" data-user-id="${data.data[i].userId}">ID: ${data.data[i].userId}</div>
                                     </div>
                                 </div>
                                 <div class="user-role">
                                     <span class="role-badge role-admin">用户</span>
                                 </div>
                                 <div class="user-status">
                                     <span class="status-badge status-unverified">封禁</span>
                                 </div>
                                 <div class="user-actions">
                                     <button class="action-btn unban-btn">解封</button>
                                     <button class="action-btn reset-pwd">重置密码</button>
                                 </div>
                             </div>		
                         `;
                     } else if(data.data[i].type == 1){
                         userHtml = `
                             <div class="user-item">
                                 <div class="user-info">
                                     <div class="user-details">
                                         <div class="username">${data.data[i].username}</div>
                                         <div class="user-id" data-user-id="${data.data[i].userId}">ID: ${data.data[i].userId}</div>
                                     </div>
                                 </div>
                                 <div class="user-role">
                                     <span class="role-badge role-admin">用户</span>
                                 </div>
                                 <div class="user-status">
                                     <span class="status-badge status-active">正常</span>
                                 </div>
                                 <div class="user-actions">
                                     <button class="action-btn ban-btn">封禁</button>
                                     <button class="action-btn reset-pwd">重置密码</button>
                                 </div>
                             </div>		
                         `;
                     }
                 } else {
                     if(data.data[i].type == 0){
                         userHtml = `
                             <div class="user-item">
                                 <div class="user-info">
                                     <div class="user-details">
                                         <div class="username">${data.data[i].username}</div>
                                         <div class="user-id" data-user-id="${data.data[i].userId}">ID: ${data.data[i].userId}</div>
                                     </div>
                                 </div>
                                 <div class="user-role">
                                     <span class="role-badge role-admin">管理员</span>
                                 </div>
                                 <div class="user-status">
                                     <span class="status-badge status-unverified">封禁</span>
                                 </div>
                                 <div class="user-actions">
                                     <button class="action-btn unban-btn">解封</button>
                                     <button class="action-btn reset-pwd">重置密码</button>
                                 </div>
                             </div>		
                         `;
                     } else if(data.data[i].type == 1){
                         userHtml = `
                             <div class="user-item">
                                 <div class="user-info">
                                     <div class="user-details">
                                         <div class="username">${data.data[i].username}</div>
                                         <div class="user-id" data-user-id="${data.data[i].userId}">ID: ${data.data[i].userId}</div>
                                     </div>
                                 </div>
                                 <div class="user-role">
                                     <span class="role-badge role-admin">管理员</span>
                                 </div>
                                 <div class="user-status">
                                     <span class="status-badge status-active">正常</span>
                                 </div>
                                 <div class="user-actions">
                                     <button class="action-btn ban-btn">封禁</button>
                                     <button class="action-btn reset-pwd">重置密码</button>
                                 </div>
                             </div>		
                         `;
                     }
                 }
                 
                 // 添加到DOM中
                 $("#user").append(userHtml);
             }
         }
     });
   	}
        // 发起AJAX请求
       
   
    
    // 使用事件委托绑定按钮点击事件
    $("#user").on("click", ".ban-btn", function() {
        const userId = $(this).closest(".user-item").find(".user-id").data("user-id"); 
        downUser(userId);
    });
    
    $("#user").on("click", ".unban-btn", function() {
        const userId = $(this).closest(".user-item").find(".user-id").data("user-id"); 
        upUser(userId);
    });
    
    $("#user").on("click", ".reset-pwd", function() {
        const userId = $(this).closest(".user-item").find(".user-id").data("user-id"); 
        upPass(userId);
    });
});
		$("#but").click(function(){
			let uId = $("#input").val();
			console.log(uId);
			$.ajax({
		         type: "GET",
		         url: "allUserByUserId.do",
		         data: {
		             userId:uId
		         },
		         success: function(data) {
		        	 $("#user").empty();
		            	for(var i = 0;i<data.data.length;i++){
		            		let userId = data.data[i].userId;
		            		if(data.data[i].role==0){
		            			if(data.data[i].type==0){
		            				$("#user").append(`
				             				<div class="user-item">
				                                <div class="user-info">
				                                    <div class="user-details">
				                                       	<div class="username">${data.data[i].username}</div>
				                                        <div class="user-id" data-user-id="${data.data[i].userId}">ID: ${data.data[i].userId}</div>
				                                    </div>
				                                </div>
				                                <div class="user-role">
				                                    <span class="role-badge role-admin">用户</span>
				                                </div>
				                                <div class="user-status">
				                                    <span class="status-badge status-unverified">封禁</span>
				                                </div>
				                                <div class="user-actions">
				                                    <button class="action-btn unban-btn" id="unban">解封</button>
				                                    <button class="action-btn reset-pwd">重置密码</button>
				                                </div>
				                            </div>		
				             			`)
		            			}else if(data.data[i].type==1){
		            				$("#user").append(`
				             				<div class="user-item">
				                                <div class="user-info">
				                                    <div class="user-details">
				                                       	<div class="username">${data.data[i].username}</div>
				                                        <div class="user-id" data-user-id="${data.data[i].userId}">ID: ${data.data[i].userId}</div>
				                                    </div>
				                                </div>
				                                <div class="user-role">
				                                    <span class="role-badge role-admin">用户</span>
				                                </div>
				                                <div class="user-status">
				                                    <span class="status-badge status-active">正常</span>
				                                </div>
				                                <div class="user-actions">
				                                    <button class="action-btn ban-btn" id="ban">封禁</button>
				                                    <button class="action-btn reset-pwd">重置密码</button>
				                                </div>
				                            </div>		
				             			`)
		            			}
		            			
		            		}else{
		            			
		            			if(data.data[i].type==0){
		            				$("#user").append(`
				             				<div class="user-item">
				                                <div class="user-info">
				                                    <div class="user-details">
				                                       	<div class="username">${data.data[i].username}</div>
				                                        <div class="user-id" data-user-id="${data.data[i].userId}">ID: ${data.data[i].userId}</div>
				                                    </div>
				                                </div>
				                                <div class="user-role">
				                                    <span class="role-badge role-admin">管理员</span>
				                                </div>
				                                <div class="user-status">
				                                    <span class="status-badge status-unverified">封禁</span>
				                                </div>
				                                <div class="user-actions">
				                                    <button class="action-btn unban-btn" id="unban">解封</button>
				                                    <button class="action-btn reset-pwd">重置密码</button>
				                                </div>
				                            </div>		
				             			`)
		            			}else if(data.data[i].type==1){
		            				$("#user").append(`
				             				<div class="user-item">
				                                <div class="user-info">
				                                    <div class="user-details">
				                                       	<div class="username">${data.data[i].username}</div>
				                                        <div class="user-id" data-user-id="${data.data[i].userId}">ID: ${data.data[i].userId}</div>
				                                    </div>
				                                </div>
				                                <div class="user-role">
				                                    <span class="role-badge role-admin">管理员</span>
				                                </div>
				                                <div class="user-status">
				                                    <span class="status-badge status-active">正常</span>
				                                </div>
				                                <div class="user-actions">
				                                    <button class="action-btn ban-btn" id="ban">封禁</button>
				                                    <button class="action-btn reset-pwd">重置密码</button>
				                                </div>
				                            </div>		
				             			`)
		            			}
			             			
		            		}
		            		
		            	}
		            	$("#user").on("click", ".ban-btn", function() {
	         				const userId = $(this).closest(".user-item").find(".user-id").data("user-id"); 
	                        downUser(userId);
	         			})
	         			$("#user").on("click", ".unban-btn", function() {
	         				const userId = $(this).closest(".user-item").find(".user-id").data("user-id"); 
	                        upUser(userId);
	         			})
	         			$("#user").on("click", ".reset-pwd", function() {
	         				const userId = $(this).closest(".user-item").find(".user-id").data("user-id"); 
	                        upPass(userId);
	         			})
		        }
		      })
		})
		$(document).ready(function(){
			AllUser();
		})
	</script>
</html>